<template>
  <view>
    <view class="classify__footer" v-show="!!selectedValuesLength">
      <view class="classify__shopping-cart">
        <view class="classify__footer-popup-btn" @click="show = !show">已选择 {{ selectedValuesLength }} 项</view>
        <view class="classify__footer-confirm-btn" hover-class="classify__click-class" @click="confirm">确定</view>
      </view>
    </view>

    <view class="classify__shopping-cart-popup">
      <view class="classify__mask" v-show="show" @click="show = !show"></view>
      <view class="classify__shopping-cart-popup-wrap" :class="{'classify__shopping-cart-popup-show': show}">
        <view class="classify__shopping-cart-popup-header" v-show="show">
          <view class="classify__delete" hover-class="classify__click-class" @click="clearSelected">
            <i class="classify__iconfont classify__icon-shanchu classify__delete-icon"></i><text>一键清空</text>
          </view>
        </view>
        <scroll-view scroll-y scroll-with-animation class="classify__shopping-cart-popup-content" v-show="show">
          <view class="classify__thumb-box classify__popup-thumb-box" v-for="(item, index) in selectedRows"
                :key="getKey(item, index)"
                hover-class="classify__click-class"
                @click="rightOnChange(index)"
                v-show="selectedValues.includes(item[childValueKeyName])"
          >
            <slot name="popup-classify-kids" :row="item">
              <slot name="classify-kids" :row="item">
                <i class="classify__iconfont classify__icon-check classify__selected-icon" v-if="selectedValues.includes(item[childValueKeyName])"></i>
                <image class="classify__item-menu-image" :src="item[iconKeyName]" mode=""></image>
                <view class="classify__item-menu-name">{{item[childLabelKeyName]}}</view>
              </slot>
            </slot>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 分类数据源
    list: {
      type: Array,
      default: () => []
    },

    // 选中的主键
    selectedValues: {
      type: Array,
      default: () => []
    },

    // 选中项
    selectedRows: {
      type: Array,
      default: () => []
    },

    // 右侧子分类字段
    childrenKeyName: {
      type: String,
      default: 'children'
    },

    // 右侧子分类要显示的字段
    childLabelKeyName: {
      type: String,
      default: 'name'
    },

    // 右侧子分类主键键名
    childValueKeyName: {
      type: String,
      default: 'id'
    },

    // 右侧子分类icon键名
    iconKeyName: {
      type: String,
      default: 'icon'
    },

  },
  components: {},
  data() {
    return {
      show: false
    }
  },
  filters: {},
  directives: {},
  watch: {},
  computed: {
    selectedValuesLength: function () {
      return this.selectedValues.length
    }
  },
  created() {},
  onReady() {},
  methods: {
    // 兼容百度小程序报错问题
    getKey(item, index) {
      // #ifdef BAIDU
      return item[this.childValueKeyName]
      // #endif

      // #ifndef BAIDU
      return index
      // #endif
    },

    // 多选确定
    confirm() {
      const selectedRows = []
      for (const item of this.selectedRows) {
        let map = new Map(Object.entries(item));
        map.delete('parent')
        let obj = Object.fromEntries(map);
        selectedRows.push(obj)
      }
      this.$emit('change', this.selectedValues, selectedRows)
    },

    // 清空
    clearSelected() {
      this.show = false
      for(const item of this.list) {
        item.count = 0
        let count = 0
        for(const item1 of item[this.childrenKeyName]) {
          if (count === this.selectedValues.length) {
            return
          }
          item1.checked = false
        }
      }

      this.selectedRows.splice(0, this.selectedRows.length)
      this.selectedValues.splice(0, this.selectedValues.length)
      this.$emit('update:list', this.list)
      this.$emit('update:selectedRows', this.selectedRows)
      this.$emit('update:selectedValues', this.selectedValues)
    },

    // 选择小类别
    rightOnChange(itemIndex) {
      const row = this.selectedRows[itemIndex]
      const parent = this.list[row.parentClassifyIndex] || {}
      const index = this.selectedValues.findIndex(item => item === row.key)
      this.selectedValues.splice(index, 1)
      this.selectedRows.splice(index, 1)
      row.checked = false
      parent.count--
      if (this.show && this.selectedValues.length === 0) {
        this.show = false
      }
      this.$emit('update:list', this.list)
      this.$emit('update:selectedRows', this.selectedRows)
      this.$emit('update:selectedValues', this.selectedValues)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../css/iconfont.css';

// #ifndef H5
// 处理 v-show 失效问题
[hidden] {
  display: none !important;
}
// #endif

.classify__thumb-box {
  position: relative;
  width: 33.333333%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 20rpx;
}

.classify__item-menu-image {
  width: 120rpx;
  height: 120rpx;
  // #ifdef MP-ALIPAY
  background-size: cover;
  // #endif
}
.classify__selected-icon {
  color: #303133;
  font-size: 30rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.classify__click-class {
  opacity: 0.7;
}
.classify__footer {
  height: 130rpx;
  padding: 0 20rpx;
  background-color: #fff;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-top: 2rpx solid #f3f1f1;;
  .classify__shopping-cart {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90rpx;
    width: 100%;
    border-radius: 130rpx;
    .classify__footer-popup-btn, .classify__footer-confirm-btn {
      height: 100%;
      text-align: center;
      line-height: 90rpx;
    }
    .classify__footer-popup-btn {
      background-color: #000000;
      flex: 3;
      border-top-left-radius: 130rpx;
      border-bottom-left-radius: 130rpx;
      color: #ffffff;
    }

    .classify__footer-confirm-btn {
      background-color: $uni-color-primary;
      flex: 1;
      border-top-right-radius: 130rpx;
      border-bottom-right-radius: 130rpx;
      color: #000000;
    }
  }
}

.classify__shopping-cart-popup {
  border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx;
  .classify__shopping-cart-popup-wrap {
    position: absolute;
    height: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    z-index: 11;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
  }
  .classify__shopping-cart-popup-show {
    height: auto;
    margin-bottom: 130rpx;
    padding-bottom: 20rpx;
  }
  .classify__shopping-cart-popup-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 20rpx;
    height: 48rpx;
    position: relative;
    border-bottom: 2rpx solid #f3f1f1;
    .classify__delete {
      display: flex;
      align-items: center;
      cursor: pointer;
      .classify__delete-icon {
        font-size: 28rpx;
        color: #303133;
      }
    }
  }
  .classify__shopping-cart-popup-content {
    height: auto;
    max-height: 60vh;
    ::v-deep .uni-scroll-view-content {
      display: flex;
      flex-wrap: wrap;
    }
    .classify__popup-thumb-box {
      width: 25%;
      display: inline-block;
      text-align: center;
    }
  }
}
.classify__mask {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  height: 100%;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease-in;
}
</style>
